<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 6.3.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"chuangges.gitee.io","root":"/","scheme":"Pisces","version":"7.8.0","exturl":false,"sidebar":{"position":"right","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":true,"show_result":true,"style":"mac"},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="操作电脑、开发调试、项目构建、版本管理">
<meta property="og:type" content="article">
<meta property="og:title" content="web 开发工具">
<meta property="og:url" content="https://chuangges.gitee.io/2019/02/23/2-3-web%E5%B7%A5%E5%85%B7/index.html">
<meta property="og:site_name" content="闯哥要去流浪了">
<meta property="og:description" content="操作电脑、开发调试、项目构建、版本管理">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://chuangges.gitee.io/images/web/postman.png">
<meta property="og:image" content="https://chuangges.gitee.io/images/web/git_work.png">
<meta property="og:image" content="https://chuangges.gitee.io/images/web/git_order.png">
<meta property="article:published_time" content="2019-02-23T07:41:48.000Z">
<meta property="article:modified_time" content="2024-01-03T02:17:13.295Z">
<meta property="article:author" content="chuangges">
<meta property="article:tag" content="前端技术栈">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://chuangges.gitee.io/images/web/postman.png">

<link rel="canonical" href="https://chuangges.gitee.io/2019/02/23/2-3-web%E5%B7%A5%E5%85%B7/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>web 开发工具 | 闯哥要去流浪了</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<link rel="alternate" href="/atom.xml" title="闯哥要去流浪了" type="application/atom+xml">
</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">闯哥要去流浪了</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">愿你岁月可回首，且以深情共白头</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
  </ul>
</nav>




</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://chuangges.gitee.io/2019/02/23/2-3-web%E5%B7%A5%E5%85%B7/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/chuang.png">
      <meta itemprop="name" content="chuangges">
      <meta itemprop="description" content="chuangge's blog.">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="闯哥要去流浪了">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          web 开发工具
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2019-02-23 15:41:48" itemprop="dateCreated datePublished" datetime="2019-02-23T15:41:48+08:00">2019-02-23</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2024-01-03 10:17:13" itemprop="dateModified" datetime="2024-01-03T10:17:13+08:00">2024-01-03</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E6%A0%88/" itemprop="url" rel="index"><span itemprop="name">前端技术栈</span></a>
                </span>
            </span>

          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>25k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>22 分钟</span>
            </span>
            <div class="post-description">操作电脑、开发调试、项目构建、版本管理</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id="一、操作电脑"><a href="#一、操作电脑" class="headerlink" title="一、操作电脑"></a>一、操作电脑</h1><blockquote>
<p>mac 安装包管理工具 Homebrew：<code>/bin/zsh -c &quot;$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)&quot;</code>。</p>
</blockquote>
<h2 id="操作系统"><a href="#操作系统" class="headerlink" title="操作系统"></a>操作系统</h2><ul>
<li><strong>Windows</strong>：人妻，什么都有，还常附带不想要的东西。基于 Basic 开发的微软系统，功能强大但安全堪忧，适用于正常办公以及游戏。</li>
<li><strong>Mac OS&#x2F;OSX</strong>：女友，带着有面子但必须按照它的规则。基于 linux 开发的苹果系统，应用软件较少但较安全，适用于高端移动化处理。</li>
<li><strong>Linux</strong>：小萝莉，你让它干嘛就干嘛。一种自由的、开放源码的类 Unix 操作系统，可安装到手机电脑等各种计算机硬件设备，网络功能强大并且对内存等硬件的消耗小，优点是其易用性和丰富的应用软件，多用于网络服务器。</li>
</ul>
<h2 id="操作接口"><a href="#操作接口" class="headerlink" title="操作接口"></a>操作接口</h2><ul>
<li><strong>终端 terminal</strong>：用于人与计算机进行交互的输入输出接口。本质是通过电缆、网络等连接主机的外部附加设备，一台计算机可以连接个终端。</li>
<li><strong>控制台 console</strong>：用于管理主机的特殊终端，只允许管理员使用。本质是直接和计算机相连接的原生设备，一台计算机一般只能有一个控制台。</li>
<li><strong>命令解释器 shell</strong>：提供用户界面的程序而用于与计算机内核交互。本质是接受用户指令后调用其他程序与内核交互完成指令。一般分为 <strong>命令行shell、图形shell，分别提供 命令行界面 CLI、图形用户界面 GUI</strong>。批处理：将一系列命令按照一定顺序集合为一个可执行的文本文件，在window系统的扩展名为 bat&#x2F;cmd，双击文件即可运行。</li>
<li><strong>终端与 shell 的分工</strong>：终端从用户接受 鼠标键盘等设备的输入信息，然后发送给 shell。shell 从终端获取用户指令，解析后发给计算机内核执行，并返回结果给终端。</li>
</ul>
<h2 id="服务器"><a href="#服务器" class="headerlink" title="服务器"></a>服务器</h2><blockquote>
<p>从硬件上来说是一台配置比较高的电脑，从软件角度用来处理客户端请求的服务器可分为以下两种：</p>
</blockquote>
<ul>
<li>分类       <ul>
<li><strong>web&#x2F;HTTP 服务器</strong>：比如 Apache、Nginx。专注于处理 HTTP 协议、传递本地磁盘上的静态资源给客户端，常用于提供代理服务。</li>
<li><strong>应用服务器</strong>：比如 WebLogic、Tomcat。提供可以处理业务逻辑的方法，常用来加载动态内容和处理响应数据并返回给客户端，但则只能访问其安装目录中的文件。</li>
</ul>
</li>
<li>代理<ul>
<li><strong>代理服务器</strong>：具有转发功能，扮演了服务器和客户端的中间人角色。接收客户端发送的请求并转发给服务器，同时接收服务器返回的响应并转发给客户端。</li>
<li><strong>正向代理</strong>：隐藏了真实的客户端，客户端请求都被代理服务器代替去请求。比如翻墙的原理就是在国外搭建一台代理服务器，代理去访问国外网址并返回结果给国内客户端。</li>
<li><strong>反向代理</strong>：隐藏了真实的服务端，反向代理服务器会帮客户端把请求转发到真实服务器。常用来做负载均衡，比如访问百度时会有很多服务器接收服务。</li>
<li><strong>应用</strong>：web 项目开发时联合使用 apache + tomcat + nginx。访问静态、动态资源时使用 apache&#x2F;tomcat 解析。nginx 作为反向代理服务器，同时支持高并发。</li>
</ul>
</li>
</ul>
<h1 id="二、开发调试"><a href="#二、开发调试" class="headerlink" title="二、开发调试"></a>二、开发调试</h1><h2 id="浏览器-chrome"><a href="#浏览器-chrome" class="headerlink" title="浏览器 chrome"></a>浏览器 chrome</h2><ul>
<li>搜索匹配：Google 输入框中所有空格都被理解为加号。<ul>
<li>完整匹配：<code>mysql foreign key</code>（引号）</li>
<li>筛选：<code>mysql key * nodejs</code>（加减号）</li>
<li>返回所有：<code>mysql connect error *</code>（加通配符）</li>
<li>站内搜索：<code>mysql foreign key site:stackoverflow.com</code></li>
<li>加速：输入网址后点击 Tab，这样可直接使用该站点的站内搜索</li>
</ul>
</li>
<li>调试 JS<ul>
<li><strong>断点调试</strong>：开发者工具、Sources 菜单、点击文件的行号列、点击文件左下角的 {} 格式化压缩代码、点击右侧 Breakpoints 可查看所有断点、点击右侧 scope 可查看断点数据的信息。</li>
<li><strong>Debug 断点</strong>：异步加载时可能有些 JS 代码在 Sources 中无法找到，这时可在文件中添加 <code>debugger;</code>，注意调试后需要删除该断点语句。</li>
<li><strong>Network 抓包</strong>：抓包指将网络传输发送与接收的数据包进行截获、编辑、重发等操作，调试时常用来获取 HTTP 信息并分析。</li>
</ul>
</li>
<li>扩展插件<ul>
<li><strong>谷歌访问助手</strong>：下载安装包、更多工具、扩展程序、直接拖拽、添加扩展。安装后可通过谷歌网上商店添加扩展插件。</li>
<li><strong>常用插件</strong>：掘金、FeHelper、JSONView、What runs、Clear Cache、Code Plunker、Vue.js devtools、AngularJS Batarang、React Developer Tools。</li>
</ul>
</li>
<li>黑科技<ul>
<li><strong>翻墙</strong>：配置 VPN 虚拟专用网络、配置 proxy 代理地址（setting system、proxy settings、LAN setting、proxy server、配置 Address、Port）、</li>
<li><strong>解析 VIP</strong>：打开网站 <a target="_blank" rel="external nofollow noopener noreferrer" href="https://greasyfork.org/zh-CN">Greasy Fork</a>、搜索 VIP 视频解析、安装脚本。</li>
<li>其它：视频广告过滤、电脑管家上网防护等。</li>
</ul>
</li>
</ul>
<h2 id="代码编辑-vscode"><a href="#代码编辑-vscode" class="headerlink" title="代码编辑 vscode"></a>代码编辑 vscode</h2><blockquote>
<p>常用的扩展插件和用户配置如下：</p>
</blockquote>
<ul>
<li>显示效果类<ul>
<li><strong>Dracula Official</strong>：高亮主题</li>
<li><strong>vscode-icon</strong>：让资源树目录加上图标</li>
<li><strong>Bracket Pair Colorizer</strong>：每一对括号用不同颜色区别</li>
<li><strong>Open-In-Browser</strong>：直接在浏览器中打开文件的快捷菜单 <code>alt + b</code></li>
</ul>
</li>
<li>辅助编辑类<ul>
<li><strong>HTML Snippets</strong>：html 语法填充</li>
<li><strong>HTML CSS Support</strong>：代码自动补全</li>
<li><strong>CSS Peek</strong>：css 代码追踪跳转</li>
<li><strong>Path Autocomplete</strong>：智能补全路径</li>
<li><strong>Path Intellisense</strong>：智能提示路径</li>
<li><strong>Auto Close Tag</strong>：自动闭合 HTML 标签</li>
<li><strong>Auto Rename Tag</strong>：自动修改匹配的标签</li>
<li><strong>JavaScript code snippets</strong>：JS 语法提示</li>
</ul>
</li>
<li>规范代码类<ul>
<li><strong>ESlint</strong>：检测 js、ts</li>
<li><strong>Stylelint</strong>：检测 css、scss</li>
<li><strong>Prettier</strong>：代码格式化 <code>alt + shift + F</code></li>
<li><strong>EditorConfig for VS Code</strong>：统一跨编辑器编码风格 .editorconfig</li>
<li><strong>Prettier</strong>：统一项目风格而格式化文件 .prettierrc</li>
</ul>
</li>
<li>框架插件类<ul>
<li><strong>Volar</strong>：语法高亮</li>
<li><strong>Vue3 Snippets</strong>：代码提示</li>
<li><strong>TypeScript Vue Plugin</strong>：tsx vue 语法</li>
<li><strong>React Style Helper</strong>：自动补全</li>
<li><strong>Typescript React code snippets</strong>：tsx react 语法</li>
<li><strong>ES7 React&#x2F;Redux&#x2F;React-Native snippets</strong>：语法提示</li>
<li><strong>Angular Snippets</strong>：语法提示</li>
<li><strong>Angular Files</strong>：生成文件模版</li>
<li><strong>Angular Follow Selector</strong>：文件跳转</li>
<li><strong>Angular Language Service</strong>：语法校验</li>
<li><strong>wxml</strong>：小程序代码格式化和高亮显示</li>
<li><strong>minapp</strong>：小程序代码智能补全</li>
<li><strong>wechat-snippet</strong>：代码提示</li>
</ul>
</li>
<li>开发调试类<ul>
<li><strong>npm</strong>：运行 npm 命令</li>
<li><strong>npm Intellisense</strong>：导入时提示已安装模块</li>
<li><strong>Python</strong>：添加对 py 文件的支持</li>
<li><strong>GitLens</strong>：简单实现 git 提交代码</li>
<li><strong>Git History</strong>：查看 git 提交日志</li>
<li><strong>Octotree</strong>：Github 项目代码树形展示</li>
<li><strong>Debugger for chrome</strong>：调试 Debug</li>
<li><strong>REST Client</strong>：HTTP API 本地调试工具</li>
<li><strong>Code Runner</strong>：右键一键运行代码片段或文件</li>
<li><strong>Tailwind CSS IntelliSense</strong>：自动补全类名</li>
<li><strong>Super ChatGPT</strong>：集成人工智能工具 ChatGPT</li>
</ul>
</li>
</ul>
  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1、常用快捷键</span></span><br><span class="line">ctrl + p                       <span class="comment">// 文件定位</span></span><br><span class="line">ctrl + <span class="title class_">Option</span> + ↑↓             <span class="comment">// 选中区域</span></span><br><span class="line">option + ↑↓                    <span class="comment">// 移动当前行代码</span></span><br><span class="line">ctrl + ←↑↓→                    <span class="comment">// 移动鼠标到行头/尾    </span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2、运行调试：.vscode/launch.json</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="string">&quot;version&quot;</span>: <span class="string">&quot;0.2.0&quot;</span>,</span><br><span class="line">    <span class="string">&quot;configurations&quot;</span>: [</span><br><span class="line">        &#123;</span><br><span class="line">            <span class="string">&quot;type&quot;</span>: <span class="string">&quot;pwa-node&quot;</span>,   <span class="comment">// 调试器类型</span></span><br><span class="line">            <span class="string">&quot;request&quot;</span>: <span class="string">&quot;launch&quot;</span>,  <span class="comment">// 请求方式：launch(启动)、attach(附加)</span></span><br><span class="line">            <span class="string">&quot;name&quot;</span>: <span class="string">&quot;umif&quot;</span>,       <span class="comment">// 启动配置名称</span></span><br><span class="line">            <span class="string">&quot;program&quot;</span>: <span class="string">&quot;$&#123;workspaceFolder&#125;/umif/server.js&quot;</span>, <span class="comment">// 入口文件</span></span><br><span class="line">            <span class="string">&quot;cwd&quot;</span>: <span class="string">&quot;$&#123;workspaceFolder&#125;/umif&quot;</span></span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            <span class="string">&quot;type&quot;</span>: <span class="string">&quot;node&quot;</span>,</span><br><span class="line">            <span class="string">&quot;request&quot;</span>: <span class="string">&quot;launch&quot;</span>,</span><br><span class="line">            <span class="string">&quot;name&quot;</span>: <span class="string">&quot;mes4pc&quot;</span>,</span><br><span class="line">            <span class="string">&quot;program&quot;</span>: <span class="string">&quot;$&#123;workspaceFolder&#125;/mes4pc/server.js&quot;</span>,</span><br><span class="line">            <span class="string">&quot;cwd&quot;</span>: <span class="string">&quot;$&#123;workspaceFolder&#125;/mes4pc&quot;</span>,</span><br><span class="line">            <span class="string">&quot;env&quot;</span>: &#123;</span><br><span class="line">                <span class="string">&quot;NODE_ENV&quot;</span>:<span class="string">&quot;production&quot;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        &#123;</span><br><span class="line">            <span class="string">&quot;type&quot;</span>: <span class="string">&quot;node&quot;</span>,               </span><br><span class="line">            <span class="string">&quot;request&quot;</span>: <span class="string">&quot;launch&quot;</span>,          </span><br><span class="line">            <span class="string">&quot;name&quot;</span>: <span class="string">&quot;Hexo&quot;</span>,               </span><br><span class="line">            <span class="string">&quot;runtimeExecutable&quot;</span>: <span class="string">&quot;npm&quot;</span>,</span><br><span class="line">            <span class="string">&quot;cwd&quot;</span>: <span class="string">&quot;$&#123;workspaceFolder&#125;&quot;</span>,  <span class="comment">// 启动目录</span></span><br><span class="line">            <span class="string">&quot;runtimeArgs&quot;</span>: [<span class="string">&quot;run-script&quot;</span>, <span class="string">&quot;debug&quot;</span>],   <span class="comment">// 传给执行工具的参数</span></span><br><span class="line">            <span class="string">&quot;skipFiles&quot;</span>: [<span class="string">&quot;&lt;node_internals&gt;/**/*.js&quot;</span>] <span class="comment">// 跳过 Node 内置模块</span></span><br><span class="line">        &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 3、用户配置：ctrl + shift + p、User Settings</span></span><br><span class="line"><span class="comment">// 解决 vscode 卡顿 (cpu git 占用过高)</span></span><br><span class="line"><span class="string">&quot;search.followSymlinks&quot;</span>: <span class="literal">false</span>,</span><br><span class="line"><span class="string">&quot;git.enabled&quot;</span>: <span class="literal">false</span>,</span><br><span class="line"><span class="string">&quot;git.autorefresh&quot;</span>: <span class="literal">false</span>,</span><br><span class="line"></span><br><span class="line"><span class="comment">// 取消右侧预览功能</span></span><br><span class="line"><span class="string">&quot;editor.minimap.enabled&quot;</span>: <span class="literal">false</span>,</span><br><span class="line"><span class="comment">// 窗口失去焦点自动保存   </span></span><br><span class="line"><span class="string">&quot;files.autoSave&quot;</span>: <span class="string">&quot;onFocusChange&quot;</span>,</span><br><span class="line"><span class="comment">// 不再显示扩展建议的通知 </span></span><br><span class="line"><span class="string">&quot;extensions.ignoreRecommendations&quot;</span>: <span class="literal">true</span>,   </span><br><span class="line"><span class="comment">// 不再显示新版本消息   </span></span><br><span class="line"><span class="string">&quot;vsicons.dontShowNewVersionMessage&quot;</span>: <span class="literal">true</span>, </span><br><span class="line"><span class="comment">// 是否将打开的编辑器显示为预览</span></span><br><span class="line"><span class="string">&quot;workbench.editor.enablePreview&quot;</span>: <span class="literal">false</span>,   </span><br><span class="line"><span class="comment">// 字体字号</span></span><br><span class="line"><span class="string">&quot;editor.fontSize&quot;</span>: <span class="number">16</span>,</span><br><span class="line"><span class="comment">// 代码缩进</span></span><br><span class="line"><span class="string">&quot;editor.tabSize&quot;</span>: <span class="number">2</span>,</span><br><span class="line"><span class="comment">// eslint 验证和自动修复</span></span><br><span class="line"><span class="string">&quot;eslint.validate&quot;</span>: [  </span><br><span class="line">  <span class="string">&quot;javascript&quot;</span>,       </span><br><span class="line">  <span class="string">&quot;javascriptreact&quot;</span>,      </span><br><span class="line">  <span class="string">&quot;typescript&quot;</span>, </span><br><span class="line">  <span class="string">&quot;typescriptreact&quot;</span> </span><br><span class="line">  <span class="string">&quot;html&quot;</span>,</span><br><span class="line">  <span class="string">&quot;vue&quot;</span>,      </span><br><span class="line">  &#123;</span><br><span class="line">    <span class="string">&quot;language&quot;</span>: <span class="string">&quot;vue&quot;</span>,           </span><br><span class="line">    <span class="string">&quot;autoFix&quot;</span>: <span class="literal">true</span>       </span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="string">&quot;language&quot;</span>: <span class="string">&quot;html&quot;</span>,           </span><br><span class="line">    <span class="string">&quot;autoFix&quot;</span>: <span class="literal">true</span>       </span><br><span class="line">  &#125;</span><br><span class="line">],</span><br><span class="line"><span class="comment">// 代替 vscode 的 ts 语法智能提示</span></span><br><span class="line"><span class="string">&quot;typescript.tsdk&quot;</span>: <span class="string">&quot;./node_modules/typescript/lib&quot;</span>,</span><br><span class="line"><span class="string">&quot;editor.codeActionsOnSave&quot;</span>: &#123;</span><br><span class="line">  <span class="string">&quot;source.fixAll.eslint&quot;</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="string">&quot;source.fixAll.stylelint&quot;</span>: <span class="literal">true</span></span><br><span class="line">&#125;,</span><br><span class="line"><span class="comment">// 使用 stylelint 自身的校验即可</span></span><br><span class="line"><span class="string">&quot;css.validate&quot;</span>: <span class="literal">false</span>,</span><br><span class="line"><span class="string">&quot;less.validate&quot;</span>: <span class="literal">false</span>,</span><br><span class="line"><span class="string">&quot;scss.validate&quot;</span>: <span class="literal">false</span>,</span><br><span class="line"><span class="comment">// 保存时自动格式化</span></span><br><span class="line"><span class="string">&quot;editor.formatOnSave&quot;</span>: <span class="literal">true</span></span><br><span class="line"><span class="comment">// 搜索排除下面的文件</span></span><br><span class="line"><span class="string">&quot;search.exclude&quot;</span>: &#123;           </span><br><span class="line">  <span class="string">&quot;**/node_modules&quot;</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="string">&quot;dist&quot;</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="string">&quot;yarn.lock&quot;</span>: <span class="literal">true</span>,</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// HTML Snippets 插件配置</span></span><br><span class="line"><span class="string">&quot;emmet.triggerExpansionOnTab&quot;</span>: <span class="literal">true</span>,</span><br><span class="line"><span class="string">&quot;emmet.includeLanguages&quot;</span>: &#123;</span><br><span class="line">  <span class="string">&quot;wxml&quot;</span>: <span class="string">&quot;html&quot;</span>,</span><br><span class="line">  <span class="string">&quot;vue-html&quot;</span>: <span class="string">&quot;html&quot;</span>,</span><br><span class="line">  <span class="string">&quot;vue&quot;</span>: <span class="string">&quot;html&quot;</span></span><br><span class="line">&#125;,</span><br><span class="line"><span class="comment">// 使对应扩展名的文件使用特定语言</span></span><br><span class="line"><span class="string">&quot;files.associations&quot;</span>: &#123;</span><br><span class="line">  <span class="string">&quot;*.tpl&quot;</span>: <span class="string">&quot;html&quot;</span>,</span><br><span class="line">  <span class="string">&quot;*.cjson&quot;</span>: <span class="string">&quot;jsonc&quot;</span>,</span><br><span class="line">  <span class="string">&quot;*.wxss&quot;</span>: <span class="string">&quot;css&quot;</span>,</span><br><span class="line">  <span class="string">&quot;*.wxs&quot;</span>: <span class="string">&quot;javascript&quot;</span>,</span><br><span class="line">  <span class="string">&quot;.**rc&quot;</span>: <span class="string">&quot;json&quot;</span>,</span><br><span class="line">  <span class="string">&quot;.sequelizerc&quot;</span>: <span class="string">&quot;javascript&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 4、requests.http：HTTP 请求执行后在右侧区域显示结果</span></span><br><span class="line"><span class="comment">// 执行方式：点击 Send Request、右键选择 Send Request、快捷键 Ctrl+Alt+R </span></span><br><span class="line"><span class="variable constant_">GET</span> <span class="attr">http</span>:<span class="comment">//localhost:5438/licence/query</span></span><br><span class="line"><span class="title class_">Content</span>-<span class="title class_">Type</span>: application/json</span><br><span class="line"></span><br><span class="line"><span class="variable constant_">POST</span> <span class="attr">http</span>:<span class="comment">//localhost:5438/baiduAip</span></span><br><span class="line"><span class="title class_">Content</span>-<span class="title class_">Type</span>: application/json</span><br><span class="line">&#123;</span><br><span class="line">  <span class="string">&quot;APP_ID&quot;</span>: <span class="string">&quot;&quot;</span>,</span><br><span class="line">  <span class="string">&quot;API_KEY&quot;</span>: <span class="string">&quot;&quot;</span>,</span><br><span class="line">  <span class="string">&quot;SECRET_KEY&quot;</span>: <span class="string">&quot;&quot;</span>,</span><br><span class="line">  <span class="string">&quot;text&quot;</span>: <span class="string">&quot;请注意&quot;</span>,</span><br><span class="line">  <span class="string">&quot;Type&quot;</span>: <span class="string">&quot;speech&quot;</span>,</span><br><span class="line">  <span class="string">&quot;options&quot;</span>: &#123;<span class="string">&quot;spd&quot;</span>: <span class="number">5</span>, <span class="string">&quot;pit&quot;</span>: <span class="number">5</span>, <span class="string">&quot;per&quot;</span>: <span class="number">0</span>&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable constant_">POST</span> <span class="attr">https</span>:<span class="comment">//api.example.com/login</span></span><br><span class="line"><span class="title class_">Content</span>-<span class="title class_">Type</span>: application/x-www-form-urlencoded</span><br><span class="line">name=foo</span><br><span class="line">&amp;password=bar</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 5、调试服务器时打开一个 URI</span></span><br><span class="line"><span class="keyword">var</span> express = <span class="built_in">require</span>(<span class="string">&#x27;express&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> app = <span class="title function_">express</span>();</span><br><span class="line">app.<span class="title function_">get</span>(<span class="string">&#x27;/&#x27;</span>, <span class="keyword">function</span>(<span class="params">req, res</span>) &#123;</span><br><span class="line">    res.<span class="title function_">send</span>(<span class="string">&#x27;Hello World!&#x27;</span>);</span><br><span class="line">&#125;);</span><br><span class="line">app.<span class="title function_">listen</span>(<span class="number">3000</span>, <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;listening at http://localhost:3000!&#x27;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">&#123;  </span><br><span class="line">  <span class="string">&quot;type&quot;</span>: <span class="string">&quot;node&quot;</span>,</span><br><span class="line">  <span class="string">&quot;request&quot;</span>: <span class="string">&quot;launch&quot;</span>,</span><br><span class="line">  <span class="string">&quot;name&quot;</span>: <span class="string">&quot;Launch Program&quot;</span>,</span><br><span class="line">  <span class="string">&quot;program&quot;</span>: <span class="string">&quot;$&#123;workspaceFolder&#125;/app.js&quot;</span>,</span><br><span class="line">  <span class="string">&quot;serverReadyAction&quot;</span>: &#123;</span><br><span class="line">    <span class="string">&quot;pattern&quot;</span>: <span class="string">&quot;listening on port ([0-9]+)&quot;</span>,  <span class="comment">// 程度端口号</span></span><br><span class="line">    <span class="string">&quot;uriFormat&quot;</span>: <span class="string">&quot;http://localhost:%s&quot;</span>,       <span class="comment">// 映射为 URI</span></span><br><span class="line">    <span class="string">&quot;action&quot;</span>: <span class="string">&quot;openExternally&quot;</span>                <span class="comment">// 打开浏览器</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="接口调试-Postman"><a href="#接口调试-Postman" class="headerlink" title="接口调试 Postman"></a>接口调试 Postman</h2>  <div align="center">
    <img src="" data-original="/images/web/postman.png" alt="Postman" width="100%">
  </div>

<ul>
<li>接口请求：GET 请求时可以不输入请求头与请求参数，POST 请求时可输入参数值并设置参数格式 Content-Type 如下：<ul>
<li><strong>raw</strong>：可上传 text、json、xml、html 等任意格式的文本。</li>
<li><strong>form-data</strong>：即 multipart&#x2F;form-data，可上传文件或数据。</li>
<li><strong>x-www-form-urlencoded</strong>：即 application&#x2F;x-www-from-urlencoded，它会将表单数据转换为键值对。</li>
<li><strong>binary</strong>：即 Content-Type:application&#x2F;octet-stream，但一次上传一个文件，并且只能上传二进制文件。</li>
</ul>
</li>
<li>Collections 集合：将多个接口请求放在一起并管理起来，一个工程创建一个 Collection 方便查找及统一处理数据。<ul>
<li>创建 Collections：点击加号图标并输入内容。</li>
<li>添加请求：可以通过 Add Folder 针对不同的请求方式做分组。</li>
</ul>
</li>
<li>身份验证 Authentication<ul>
<li><strong>Basic Auth</strong>：基础验证，会直接将用户名、密码的信息放在请求的 Header</li>
<li><strong>Digest Auth</strong>：使用当前值生成 authorization header，如果已经存在则会被移除</li>
<li><strong>OAuth 1.0</strong>：基于身份验证，可在 header 或查询参数中设置 value。</li>
<li><strong>OAuth 2.0</strong>：支持获得 token 并添加到 request</li>
</ul>
</li>
</ul>
<h2 id="移动端调试-vConsole"><a href="#移动端调试-vConsole" class="headerlink" title="移动端调试 vConsole"></a>移动端调试 vConsole</h2><blockquote>
<p>通过 vConsole.js 重写 console 方法，实现了类似于微信小程序的移动端调试效果。它是腾讯推出的一个轻量、可拓展、针对手机网页的前端开发者调试面板。</p>
</blockquote>
  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">npm install vconsole</span><br><span class="line"></span><br><span class="line"><span class="comment">// main.js</span></span><br><span class="line"><span class="keyword">var</span> vConsole = <span class="keyword">new</span> <span class="title class_">VConsole</span>();</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;Hello world&#x27;</span>);</span><br></pre></td></tr></table></figure>

<h2 id="网站加速"><a href="#网站加速" class="headerlink" title="网站加速"></a>网站加速</h2><blockquote>
<p>github、apple 等网站无法访问或加载缓慢时，可以通过 ping 检测网站解析域名并将相应网站替换为速度快的 dns 服务器。</p>
</blockquote>
  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 解析域名</span></span><br><span class="line"><span class="attr">https</span>:<span class="comment">//ping.chinaz.com/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 编辑 /etc/hosts</span></span><br><span class="line"><span class="number">17.253</span><span class="number">.85</span><span class="number">.201</span>   developer.<span class="property">apple</span>.<span class="property">com</span></span><br><span class="line"><span class="number">17.253</span><span class="number">.85</span><span class="number">.202</span>   devstreaming-cdn.<span class="property">apple</span>.<span class="property">com</span></span><br><span class="line"><span class="number">104.26</span><span class="number">.7</span><span class="number">.173</span>    ionicframework.<span class="property">com</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 更新 DNS 缓存 </span></span><br><span class="line">dscacheutil -flushcache</span><br><span class="line"></span><br><span class="line"><span class="comment">// Warning: Changing a readonly file</span></span><br><span class="line">sudo rm -f /etc/.<span class="property">hosts</span>.<span class="property">swp</span></span><br><span class="line">sudo vim /etc/hosts</span><br></pre></td></tr></table></figure>


<h1 id="三、项目构建"><a href="#三、项目构建" class="headerlink" title="三、项目构建"></a>三、项目构建</h1><ul>
<li><code>Npm、Bower</code>：基于 NodeJS 的包管理工具，用来下载、安装、上传和管理已安装包。</li>
<li><code>Gulp、Grunt</code>：基于 NodeJS 的自动化构建工具，用来自动化完成一些常见的、重复的低技术含量任务。两者最大区别是 Gulp 采取流式接口。</li>
<li><code>Webpack、Browserify、RequireJS</code>：模块化解决方案。后两个只是支持打包。</li>
<li><code>ESLint、JSLint</code>：代码检测工具，常用于分析代码中潜在错误。</li>
<li><code>Yeoman、create-react-app、vue-cli、angular-cli</code>：脚手架工具，用于解决模块依赖、统一代码风格、减少重复工作量等问题，并创建一个易用的工作流来帮忙开发者快速新建项目。Yeoman 可用于创建任何类型的前端项目。</li>
<li><code>Git、Svn</code>：版本管理工具。Git 分布式管理指每台电脑都是一个版本仓库但有一个集中的服务中心 Github，可以离线在本地提交而只需要在提交和下载时联网。Svn 集中式管理指所有版本文件都集中存放到一个服务器，但开发时需要联网。</li>
</ul>
<h2 id="构建工具指标"><a href="#构建工具指标" class="headerlink" title="构建工具指标"></a>构建工具指标</h2><ul>
<li><strong>Code Splitting 代码分割</strong>：打包时拆分静态资源，页面加载时实现最合理的按需加载。</li>
<li><strong>Hashing 哈希</strong>：对打包资源进行版本信息的映射，最大化的利用缓存机制。比如热更新。</li>
<li><strong>Importing Modules 依赖机制</strong>：通过配置实现 CommonJS、AMD 等模块化规范。</li>
<li><strong>Non-JavaScript Resources</strong>：导入 html、css、image 等非 Js 资源的支持能力。</li>
<li><strong>Transformations 编译</strong>：压缩 JS 代码并删除无用代码。对于 jsx、.vue、es 等代码的编译不会内置到构建工具中，而是通过 Babel 等融合到工程化流程。构建工具只做份内的事情，其他扩展能力通过插件化机制来完成。</li>
</ul>
<h2 id="包管理工具"><a href="#包管理工具" class="headerlink" title="包管理工具"></a>包管理工具</h2><h3 id="Npm"><a href="#Npm" class="headerlink" title="Npm"></a>Npm</h3><ul>
<li>从 npm 服务器下载别人编写的三方包到本地使用。</li>
<li>从 npm 服务器下载并安装别人编写的命令行程序到本地使用。</li>
<li>将自己编写的包或命令行程序上传到 npm 服务器供别人使用。</li>
</ul>
  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 常用命令</span></span><br><span class="line">npm -v                    <span class="comment">// 查看版本</span></span><br><span class="line">npm list                  <span class="comment">// 当前目录已安装插件</span></span><br><span class="line">npm init                  <span class="comment">// 生成 package.json 文件</span></span><br><span class="line"></span><br><span class="line">npm i &lt;name&gt; -g           <span class="comment">//安装包</span></span><br><span class="line">npm uninstall &lt;name&gt;      <span class="comment">//卸载包</span></span><br><span class="line">npm update &lt;name&gt;         <span class="comment">//更新包</span></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">* <span class="doctag">@title</span> 可添加的修饰符</span></span><br><span class="line"><span class="comment">* <span class="doctag">@prame</span> -g               全局(不加则为本地安装)</span></span><br><span class="line"><span class="comment">* <span class="doctag">@prame</span> --no-save        不写入 package.json 的依赖</span></span><br><span class="line"><span class="comment">* <span class="doctag">@prame</span> -S / --save      生产环境还要用的依赖 (package.json/dependencies)</span></span><br><span class="line"><span class="comment">* <span class="doctag">@prame</span> -D / --save-dev  只用于开发环境的依赖 (package.json/devDependencies)</span></span><br><span class="line"><span class="comment">**/</span></span><br><span class="line"></span><br><span class="line">npm run script-key        <span class="comment">// 执行package.json中 &quot;scripts&quot; 选项对应的js</span></span><br><span class="line">npm start                 <span class="comment">// 比较特殊</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 发布 npm 包</span></span><br><span class="line">cd test                 <span class="comment">// 选择目标文件夹</span></span><br><span class="line">npm init                <span class="comment">// 配置包 package.json</span></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="number">1</span>      <span class="comment">// 编辑包 test/index.js</span></span><br><span class="line"></span><br><span class="line">npm adduser             <span class="comment">// 注册，第一次发布包</span></span><br><span class="line">npm login               <span class="comment">// 登录，非第一次发布包</span></span><br><span class="line"></span><br><span class="line">npm publish            <span class="comment">// 发布/更新包</span></span><br><span class="line">npm install 包名        <span class="comment">// npm官网搜索后验证下载</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 撤销发布的包要用force强制删除。超过24小时就不能删除了</span></span><br><span class="line">npm --force unpublish 包名</span><br></pre></td></tr></table></figure>
<h3 id="Npx"><a href="#Npx" class="headerlink" title="Npx"></a>Npx</h3><blockquote>
<p>如果你把 NPM 升级到最新版本 <a href="mailto:&#110;&#112;&#109;&#x40;&#x35;&#46;&#x32;&#46;&#x30;">&#110;&#112;&#109;&#x40;&#x35;&#46;&#x32;&#46;&#x30;</a>，它就会安装一个新的包 npx，它用来代替 npm 来直接执行包（package）命令。</p>
</blockquote>
  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 升级</span></span><br><span class="line">npm i npm@latest -g</span><br><span class="line">npm i cnpm -g --registry=<span class="attr">https</span>:<span class="comment">//registry.npmmirror.com/ </span></span><br><span class="line"></span><br><span class="line"><span class="comment">// npm 使用 create-react-app</span></span><br><span class="line">npm init</span><br><span class="line">npm install -g create-react-app</span><br><span class="line">create-react-app my-app</span><br><span class="line"></span><br><span class="line"><span class="comment">// npx 直接使用，包不存在时会自动下载</span></span><br><span class="line">npx create-react-app my-app</span><br></pre></td></tr></table></figure>

<h3 id="Yarn"><a href="#Yarn" class="headerlink" title="Yarn"></a>Yarn</h3><blockquote>
<p>Facebook 等公司开发的用于替换 npm 的包管理工具，它解决了 npm 存在的问题：1、安装时无法保证速度和版本统一，2、安装时允许运行代码而不能保证安全。</p>
</blockquote>
  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 常用命令</span></span><br><span class="line">yarn -v</span><br><span class="line">yarn init</span><br><span class="line"></span><br><span class="line">yarn === npm install</span><br><span class="line">yarn add lodash === npm i lodash --save</span><br><span class="line">yarn add lodash --dev === npm i lodash --save-dev</span><br><span class="line">yarn <span class="variable language_">global</span> add lodash === npm i lodash -g</span><br><span class="line">npm uninstall lodash --save === yarn remove lodash</span><br><span class="line">rm -rf node_modules &amp;&amp; npm install === yarn upgrade</span><br><span class="line"></span><br><span class="line"><span class="comment">// 更新淘宝源</span></span><br><span class="line">yarn config get registry</span><br><span class="line">yarn config set registry <span class="attr">https</span>:<span class="comment">//registry.npm.taobao.org</span></span><br><span class="line">yarn config set disturl <span class="attr">https</span>:<span class="comment">//npm.taobao.org/dist --global</span></span><br></pre></td></tr></table></figure>

<h2 id="构建工具-Gulp"><a href="#构建工具-Gulp" class="headerlink" title="构建工具 Gulp"></a>构建工具 Gulp</h2><ul>
<li><strong>常用插件</strong><ul>
<li>gulp-minify-html：压缩 html</li>
<li>gulp-minify-css：压缩 css</li>
<li>gulp-uglify：压缩 js</li>
<li>gulp-smushit：压缩图片</li>
<li>gulp-concat：文件合并</li>
<li>gulp-rename：重命名</li>
<li>gulp-babel：编译 ES6</li>
<li>gulp-sass&#x2F;less：css 预处理</li>
<li>gulp-autoprefixer：自动添加 css 前缀。</li>
<li>browser-sync：自动刷新页面(非 gulp 插件)。</li>
</ul>
</li>
<li><strong>API</strong><ul>
<li>task：创建任务</li>
<li>run：运行任务</li>
<li>watch：监听任务</li>
<li>src：设置需处理的文件路径(正则&#x2F;数组)。</li>
<li>dest：设置生成文件的路径，一个任务可有多个生成路径。</li>
</ul>
</li>
</ul>
  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 初始化目录</span></span><br><span class="line">├── app              <span class="comment">// 工作目录：源文件</span></span><br><span class="line">│   ├── js</span><br><span class="line">│   ├── <span class="title class_">Sass</span></span><br><span class="line">│   └── index.<span class="property">html</span></span><br><span class="line">│</span><br><span class="line">├── dist            <span class="comment">// 目标目录：编译、压缩后的文件</span></span><br><span class="line">└── release         <span class="comment">// 可以发布到服务器的文件目录</span></span><br><span class="line"></span><br><span class="line">cnpm install gulp -g  <span class="comment">// 全局安装，执行gulp任务</span></span><br><span class="line">cd <span class="title class_">GulpTest</span></span><br><span class="line">cnpm init      <span class="comment">// 生成package.json文件</span></span><br><span class="line">cnpm install gulp -S  <span class="comment">// 本地安装，使用gulp插件并避免版本冲突</span></span><br><span class="line">gulp -v       <span class="comment">// 查看版本</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 配置文件 gulpfile.js</span></span><br><span class="line"><span class="keyword">var</span> gulp = <span class="built_in">require</span>(<span class="string">&quot;gulp&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> sass = <span class="built_in">require</span>(<span class="string">&quot;gulp-sass&quot;</span>);         <span class="comment">// 编译sass</span></span><br><span class="line"><span class="keyword">var</span> maps = <span class="built_in">require</span>(<span class="string">&quot;gulp-sourcemaps&quot;</span>);   <span class="comment">// 在浏览器显示scss样式以便调试</span></span><br><span class="line"><span class="keyword">var</span> autoprefixer = <span class="built_in">require</span>(<span class="string">&quot;gulp-autoprefixer&quot;</span>); <span class="comment">//自动添加前后缀</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> htmlmin = <span class="built_in">require</span>(<span class="string">&quot;gulp-htmlmin&quot;</span>); <span class="comment">//html压缩</span></span><br><span class="line"><span class="keyword">var</span> uglify = <span class="built_in">require</span>(<span class="string">&quot;gulp-uglify&quot;</span>); <span class="comment">//压缩js文件</span></span><br><span class="line"><span class="keyword">var</span> smushit = <span class="built_in">require</span>(<span class="string">&quot;gulp-smushit&quot;</span>); <span class="comment">//图片压缩</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> concat = <span class="built_in">require</span>(<span class="string">&quot;gulp-concat&quot;</span>); <span class="comment">//文件合并</span></span><br><span class="line"><span class="keyword">var</span> babel = <span class="built_in">require</span>(<span class="string">&quot;gulp-babel&quot;</span>); <span class="comment">//将ES6代码编译成ES5</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> bs = <span class="built_in">require</span>(<span class="string">&quot;browser-sync&quot;</span>).<span class="title function_">create</span>(); <span class="comment">//页面同步</span></span><br><span class="line"><span class="keyword">var</span> reload = bs.<span class="property">reload</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 默认任务</span></span><br><span class="line">gulp.<span class="title function_">task</span>(<span class="string">&quot;default&quot;</span>, [<span class="string">&quot;server&quot;</span>, ]);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 打包任务</span></span><br><span class="line">gulp.<span class="title function_">task</span>(<span class="string">&#x27;build&#x27;</span>, [<span class="string">&#x27;html&#x27;</span>, <span class="string">&#x27;css&#x27;</span>, <span class="string">&#x27;less&#x27;</span>, <span class="string">&#x27;js&#x27;</span>])</span><br><span class="line"></span><br><span class="line"><span class="comment">// sass 任务</span></span><br><span class="line">gulp.<span class="title function_">task</span>(<span class="string">&quot;sass&quot;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">        gulp</span><br><span class="line">          .<span class="title function_">src</span>(<span class="string">&quot;./src/scss/*.scss&quot;</span>) <span class="comment">// 导入文件</span></span><br><span class="line">          .<span class="title function_">pipe</span>(maps.<span class="title function_">init</span>()) <span class="comment">// 将页面样式定义到scss</span></span><br><span class="line">          <span class="comment">// 转译scss到css,报错时输出错误信息,不终止程序运行</span></span><br><span class="line">          .<span class="title function_">pipe</span>(<span class="title function_">sass</span>(&#123;<span class="attr">outputStyle</span>: <span class="string">&quot;compressed&quot;</span> &#125;).<span class="title function_">on</span>(<span class="string">&quot;error&quot;</span>, sass.<span class="property">logError</span>))</span><br><span class="line"></span><br><span class="line">          .<span class="title function_">pipe</span>(<span class="title function_">autoprefixer</span>()) <span class="comment">// 自动添加前后缀</span></span><br><span class="line">          .<span class="title function_">pipe</span>(maps.<span class="title function_">write</span>(<span class="string">&quot;./&quot;</span>)) <span class="comment">// 生成map文件（和css文件放在一起）</span></span><br><span class="line">          .<span class="title function_">pipe</span>(gulp.<span class="title function_">dest</span>(<span class="string">&quot;./dist/css&quot;</span>)) <span class="comment">// 将生成的文件放到css文件夹中</span></span><br><span class="line">          .<span class="title function_">pipe</span>(<span class="title function_">reload</span>(&#123; <span class="attr">stream</span>: <span class="literal">true</span> &#125;))</span><br><span class="line">    );</span><br><span class="line">    <span class="comment">// 任务完成后（监听关闭后），再有修改时重新启动监听时会重新执行以防报错</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 压缩 html</span></span><br><span class="line">gulp.<span class="title function_">task</span>(<span class="string">&quot;mihtml&quot;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">var</span> options = &#123;</span><br><span class="line">        <span class="attr">removeComments</span>: <span class="literal">true</span>,      <span class="comment">// 清除 HTML 注释</span></span><br><span class="line">        <span class="attr">collapseWhitespace</span>: <span class="literal">true</span>,  <span class="comment">// 压缩 HTML</span></span><br><span class="line">        <span class="attr">minfyJS</span>: <span class="literal">true</span>,   <span class="comment">// 压缩JS</span></span><br><span class="line">        <span class="attr">minfyCss</span>: <span class="literal">true</span>,  <span class="comment">// 压缩CSS</span></span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">return</span> gulp</span><br><span class="line">      .<span class="title function_">src</span>(<span class="string">&quot;./src/html/*.html&quot;</span>)</span><br><span class="line">      .<span class="title function_">pipe</span>(<span class="title function_">htmlmin</span>(options))</span><br><span class="line">      .<span class="title function_">pipe</span>(gulp.<span class="title function_">dest</span>(<span class="string">&quot;./dist/html/&quot;</span>));</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 压缩 js</span></span><br><span class="line">gulp.<span class="title function_">task</span>(<span class="string">&quot;minijs&quot;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> gulp</span><br><span class="line">      .<span class="title function_">src</span>(<span class="string">&quot;!./src/js/*.js&quot;</span>) <span class="comment">// ! 表示除了...之外</span></span><br><span class="line">      .<span class="title function_">pipe</span>(<span class="title function_">babel</span>())</span><br><span class="line">      .<span class="title function_">pipe</span>(<span class="title function_">uglify</span>())        <span class="comment">// 压缩</span></span><br><span class="line">      <span class="comment">// .pipe(concat(&#x27;all.min.js&#x27;))   // 合并到 all.min.js</span></span><br><span class="line">      .<span class="title function_">pipe</span>(gulp.<span class="title function_">dest</span>(<span class="string">&quot;./dist/js/&quot;</span>));  <span class="comment">// 指定目录</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 压缩 img</span></span><br><span class="line">gulp.<span class="title function_">task</span>(<span class="string">&quot;img&quot;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> gulp</span><br><span class="line">      .<span class="title function_">src</span>(<span class="string">&quot;./src/img/*.*&quot;</span>)</span><br><span class="line">      .<span class="title function_">pipe</span>(<span class="title function_">smushit</span>(&#123; <span class="attr">verbose</span>: <span class="literal">true</span> &#125;))</span><br><span class="line">      .<span class="title function_">pipe</span>(gulp.<span class="title function_">dest</span>(<span class="string">&quot;./dist/img/&quot;</span>));</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">// 生成服务并自动化监听项目</span></span><br><span class="line">gulp.<span class="title function_">task</span>(<span class="string">&quot;server&quot;</span>, [<span class="string">&quot;sass&quot;</span>, <span class="string">&quot;mihtml&quot;</span>, <span class="string">&quot;minijs&quot;</span>], <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    bs.<span class="title function_">init</span>(&#123;</span><br><span class="line">        <span class="attr">port</span>: <span class="number">8080</span>, </span><br><span class="line">        <span class="attr">open</span>: <span class="string">&quot;external&quot;</span>,    <span class="comment">// 启动时自动打开的网址</span></span><br><span class="line">        <span class="attr">server</span>: &#123;</span><br><span class="line">            <span class="attr">baseDir</span>: <span class="string">&#x27;./&#x27;</span>,</span><br><span class="line">            <span class="attr">index</span>: <span class="string">&#x27;dist/index.html&#x27;</span></span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="comment">// proxy: &#x27;localhost&#x27;  使用代理</span></span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    gulp.<span class="title function_">task</span>(<span class="string">&quot;run&quot;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">        gulp.<span class="title function_">run</span>(<span class="string">&quot;lint&quot;</span>, <span class="string">&quot;sass&quot;</span>, <span class="string">&quot;scripts&quot;</span>);</span><br><span class="line">        <span class="comment">// 监听sass文件变化</span></span><br><span class="line">        gulp.<span class="title function_">watch</span>(<span class="string">&quot;src/sass/*.sass&quot;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">            gulp.<span class="title function_">run</span>(<span class="string">&quot;lint&quot;</span>, <span class="string">&quot;sass&quot;</span>, <span class="string">&quot;scripts&quot;</span>);</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 监听 html</span></span><br><span class="line">    gulp.<span class="title function_">watch</span>(<span class="string">&quot;./src/html/*.html&quot;</span>, [<span class="string">&quot;mihtml&quot;</span>]);</span><br><span class="line">    gulp.<span class="title function_">watch</span>(<span class="string">&quot;./dist/html/*.html&quot;</span>).<span class="title function_">on</span>(<span class="string">&quot;change&quot;</span>, reload);</span><br><span class="line">    <span class="comment">// 监听 scss</span></span><br><span class="line">    gulp.<span class="title function_">watch</span>(<span class="string">&quot;./src/scss/*.scss&quot;</span>, [<span class="string">&quot;sass&quot;</span>]);</span><br><span class="line">    gulp.<span class="title function_">watch</span>(<span class="string">&quot;./dist/css/*.css&quot;</span>).<span class="title function_">on</span>(<span class="string">&quot;change&quot;</span>, reload);</span><br><span class="line">    <span class="comment">// 监听 js</span></span><br><span class="line">    gulp.<span class="title function_">watch</span>(<span class="string">&quot;./src/js/*.js&quot;</span>, [<span class="string">&quot;minijs&quot;</span>]);</span><br><span class="line">    gulp.<span class="title function_">watch</span>(<span class="string">&quot;./dist/js/*js&quot;</span>).<span class="title function_">on</span>(<span class="string">&quot;change&quot;</span>, reload);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 运行 gulp： 定义 package.json scripts，npm install rimraf -g</span></span><br><span class="line"><span class="string">&quot;scripts&quot;</span>: &#123;</span><br><span class="line">  <span class="string">&quot;test&quot;</span>: <span class="string">&quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;</span>,</span><br><span class="line">  <span class="string">&quot;start&quot;</span>: <span class="string">&quot;gulp dev&quot;</span>,                   <span class="comment">// 执行 gulp dev 命令</span></span><br><span class="line">  <span class="string">&quot;clean&quot;</span>: <span class="string">&quot;rimraf dist&quot;</span>,                <span class="comment">// 清空 dist 目录文件</span></span><br><span class="line">  <span class="string">&quot;build&quot;</span>: <span class="string">&quot;rimraf dist &amp;&amp; gulp build&quot;</span>   <span class="comment">// 清空 dist 之后打包</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="打包工具-Webpack"><a href="#打包工具-Webpack" class="headerlink" title="打包工具 Webpack"></a>打包工具 Webpack</h2><blockquote>
<p>模块化打包工具的需求：能够将散落的模块打包到一起、能够编译代码的新特性、能够支持不同种类的前端资源模块。Webpack 通过 Loader 机制对零散的 Scss、TypeScript、ES6+ 等代码实现编译转换，然后整体或拆分打包到 JS 文件（拆分打包即打包初次加载时必须模块，其它模块则按需异步加载），在很多场景下可以替代 Gulp&#x2F;Grunt。</p>
</blockquote>
<ul>
<li>工具对比<ul>
<li><strong>Gulp&#x2F;Grunt</strong>：在一个配置文件指定对某些文件进行编译、组合、压缩等任务的具体步骤，工具会自动完成这些任务。</li>
<li><strong>Webpack</strong>：把项目当做一个整体并从根文件开始寻找所有依赖文件，使用 loaders 处理并将所有资源都转换成 js，然后用 CommonJS 机制 (require、module.exports) 管理起来。</li>
</ul>
</li>
<li>核心概念<ul>
<li><strong>Entry</strong>：webpack 开始构建的入口文件。</li>
<li><strong>Output</strong>：如何命名输出文件、输出目录。</li>
<li><strong>Loaders</strong>：解析文件的加载器，将 scss、ES6、图片等非 js 文件转换为 webpack 能够处理的模块。</li>
<li><strong>Plugins</strong>：扩展功能的插件，完成压缩文件等 loader 无法解决的功能。</li>
<li><strong>Chunk</strong>：取代 webpack3 CommonsChunkPlugin，最大特点是配置简单，设置 mode: production 之后则 webpack4 会自动开启 Code Splitting 将某些公共模块去重，打包成一个单独的 chunk。</li>
</ul>
</li>
<li>相关依赖<ul>
<li><strong>webpack</strong>：用于编译 JS 模块。</li>
<li><strong>webpack-cli</strong>：用于命令行中运行 webpack。</li>
<li>webpack-merge：提取公共配置，减少重复配置代码。<code>module.exports = WebpackMerge(baseConfig, &#123;&#125;)</code>。</li>
<li>cross-env：跨平台设置和使用环境变量。<code>scripts: &#123; build: &quot;cross-env NODE_ENV=prod webpack --config build/webpack.config.js&quot; &#125;</code>。</li>
<li>html-webpack-plugin：将打包后的 js 文件自动引入到 html 文件中。</li>
<li>webpack-dev-server：本地开启一个 http 服务，可配置端口、热更新等。</li>
<li>clean-webpack-plugin：每次打包前先处理掉之前的 dist 目录。</li>
<li>postcss-loader：补全浏览器前缀、压缩 CSS 等的 css 编译工具。</li>
</ul>
</li>
</ul>
<h3 id="基础使用"><a href="#基础使用" class="headerlink" title="基础使用"></a>基础使用</h3>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 初始化目录：npm install webpack webpack-cli -D</span></span><br><span class="line"><span class="title class_">WebTest</span></span><br><span class="line">  ├── app              <span class="comment">// 工作目录：源文件</span></span><br><span class="line">  │   ├── main.<span class="property">js</span></span><br><span class="line">  │   └── hello.<span class="property">js</span></span><br><span class="line">  │</span><br><span class="line">  ├── dist            <span class="comment">// 目标目录：打包生成的 js 文件</span></span><br><span class="line">  │   └── index.<span class="property">html</span></span><br><span class="line">  │</span><br><span class="line">  ├── node_moudles</span><br><span class="line">  └── package.<span class="property">json</span></span><br><span class="line"></span><br><span class="line">cd <span class="title class_">WebTest</span></span><br><span class="line">cnpm install webpack webpack-cli -D</span><br><span class="line">cnpm init       <span class="comment">// 新建 package.json</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// index.html</span></span><br><span class="line">div id=<span class="string">&quot;app&quot;</span></span><br><span class="line">script src=<span class="string">&quot;bundle.js&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// hello.js</span></span><br><span class="line">moudle.<span class="property">exports</span> = <span class="string">&quot;hello world&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// main.js</span></span><br><span class="line"><span class="keyword">const</span> str = <span class="built_in">require</span>(<span class="string">&quot;./hello.js&quot;</span>)</span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;#app&quot;</span>).<span class="title function_">appendChild</span>(str)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 打包执行</span></span><br><span class="line">webpack app/main.<span class="property">js</span> dist/bundle.<span class="property">js</span></span><br></pre></td></tr></table></figure>

<h3 id="基础配置"><a href="#基础配置" class="headerlink" title="基础配置"></a>基础配置</h3><blockquote>
<p>项目根目录新建 webpack.config.js 文件并配置选项，然后在终端执行 webpack 就会被自动引用。项目开发时可以创建多个配置文件：webpack.dev.config.js、webpack.pub.config.js 分别用于开发和生产环境。</p>
</blockquote>
  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line"><span class="keyword">const</span> &#123; <span class="title class_">CleanWebpackPlugin</span> &#125; = <span class="built_in">require</span>(<span class="string">&#x27;clean-webpack-plugin&#x27;</span>);</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">mode</span>: <span class="string">&#x27;production&#x27;</span>,</span><br><span class="line">  <span class="attr">entry</span>: **dirname + <span class="string">&#x27;/app/main.js&#x27;</span>, <span class="comment">// 唯一入口文件：**dirname 绝对路径</span></span><br><span class="line">  <span class="attr">output</span>: &#123;</span><br><span class="line">      <span class="attr">filename</span>: <span class="string">&#x27;bundle.js&#x27;</span>,         <span class="comment">// 输出文件名</span></span><br><span class="line">      <span class="attr">path</span>: **dirname + <span class="string">&quot;/dist&quot;</span>,     <span class="comment">// 输出文件存放地址</span></span><br><span class="line">      <span class="comment">// path: path.resolve(**dirname, &#x27;dist&#x27;)</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">module</span>: &#123;</span><br><span class="line">      <span class="attr">rules</span>: [</span><br><span class="line">          &#123;</span><br><span class="line">              <span class="attr">test</span>: <span class="regexp">/\.(png|jpg|gif)$/</span>,</span><br><span class="line">              <span class="attr">use</span>: [&#123;</span><br><span class="line">                  <span class="attr">loader</span>: <span class="string">&#x27;file-loader&#x27;</span>,</span><br><span class="line">                  <span class="comment">// loader: &#x27;url-loader&#x27;,</span></span><br><span class="line">                  <span class="attr">options</span>: &#123;</span><br><span class="line">                    <span class="comment">// 原文件名_哈希值.后缀</span></span><br><span class="line">                    <span class="attr">name</span>: <span class="string">&#x27;[name]_[hash].[ext]&#x27;</span>,</span><br><span class="line">                    <span class="comment">// 打包目录</span></span><br><span class="line">                    <span class="attr">outputPath</span>: <span class="string">&#x27;images/&#x27;</span>,</span><br><span class="line">                    <span class="comment">// 超出 10kb 则不处理</span></span><br><span class="line">                    limit : <span class="number">10</span> * <span class="number">1024</span></span><br><span class="line">                  &#125;</span><br><span class="line">              &#125;]</span><br><span class="line">          &#125;,</span><br><span class="line">          &#123;</span><br><span class="line">              <span class="comment">// css-loader 将多个 css 文件整合到一个文件</span></span><br><span class="line">              <span class="comment">// style-loader 把整合的 css 部分挂载到 head</span></span><br><span class="line">              <span class="attr">test</span>: <span class="regexp">/\.(sa|sc|c)ss$/</span>,</span><br><span class="line">              <span class="attr">use</span>: [</span><br><span class="line">                  <span class="title class_">MiniCssExtractPlugin</span>.<span class="property">loader</span>,</span><br><span class="line">                  <span class="string">&#x27;css-loader&#x27;</span>,</span><br><span class="line">                  <span class="string">&#x27;postcss-loader&#x27;</span>,</span><br><span class="line">                  <span class="string">&#x27;sass-loader&#x27;</span>,</span><br><span class="line">              ],</span><br><span class="line">          &#125;,</span><br><span class="line">          &#123;</span><br><span class="line">              <span class="attr">test</span>: <span class="regexp">/\.js$/</span>,</span><br><span class="line">              <span class="attr">exclude</span>: <span class="regexp">/node_modules/</span>,</span><br><span class="line">              <span class="attr">loader</span>: <span class="string">&quot;babel-loader&quot;</span>,</span><br><span class="line">              <span class="attr">options</span>: &#123;</span><br><span class="line">                  <span class="string">&quot;presets&quot;</span>: [</span><br><span class="line">                      [<span class="string">&quot;@babel/preset-env&quot;</span>, &#123; <span class="string">&quot;useBuiltIns&quot;</span>: <span class="string">&quot;usage&quot;</span> &#125;]</span><br><span class="line">                  ]</span><br><span class="line">              &#125;</span><br><span class="line">          &#125;</span><br><span class="line">      ]</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">plugins</span>: [ <span class="keyword">new</span> <span class="title class_">CleanWebpackPlugin</span>()]</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// package.json：配置快捷执行方法，--config 指定配置文件</span></span><br><span class="line"><span class="string">&quot;scripts&quot;</span>: &#123;</span><br><span class="line">    <span class="string">&quot;dev&quot;</span>:<span class="string">&quot;webpack --config webpack.dev.config.js&quot;</span>,</span><br><span class="line">    <span class="string">&quot;pub&quot;</span>:<span class="string">&quot;webpack --config webpack.pub.config.js&quot;</span>,</span><br><span class="line">    <span class="string">&quot;start&quot;</span>: <span class="string">&quot;webpack&quot;</span>,</span><br><span class="line">    <span class="string">&quot;server&quot;</span>: <span class="string">&quot;webpack-dev-server --inline&quot;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 执行</span></span><br><span class="line">npx webpack --config webpack.<span class="property">config</span>.<span class="property">js</span></span><br><span class="line">npm run dev</span><br></pre></td></tr></table></figure>

<h3 id="高级配置"><a href="#高级配置" class="headerlink" title="高级配置"></a>高级配置</h3><ul>
<li><strong>配置 Babel</strong><ul>
<li>功能：将 ES6、jsx 等语法编译为浏览器能够运行的 js</li>
<li>配置：webpack.config.js 或单独的 .babelrc 文件（webpack 会自动调用）</li>
</ul>
</li>
<li><strong>生成 Source Maps</strong>：有时打包后文件出错但不容易找到代码位置，而通过配置 devtool 选项后，webpack 就可以在打包时生成 source maps，这为我们提供了一种对应编译文件和源文件的方法，使得编译后的代码可读性更高和更容易调试。可选的四种配置如下：<ul>
<li>source-map：完整且功能完全的单独文件，但会减慢打包速度。</li>
<li>cheap-module-source-map：不带列映射，只能对应到具体的行。</li>
<li>eval-source-map：不影响速度且完整，但有隐患，可开发不可生产阶段。</li>
<li>cheap-module-eval-source-map：生成 Source Map 最快并且和 js 同行，不利于调试，推荐在大型项目考虑时间成本时使用。</li>
</ul>
</li>
<li><strong>构建本地服务器</strong>：Webpack 提供一个可选的本地开发服务器 webpack-dev-server，它基于 Node.js 构建而且可以实现浏览器监听代码修改并自动刷新等效果，配置前需要通过 npm 安装它作为项目依赖。</li>
</ul>
  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">    <span class="attr">entry</span>: **dirname + <span class="string">&quot;/app/main.js&quot;</span>,</span><br><span class="line">    <span class="attr">output</span>: &#123;</span><br><span class="line">        <span class="attr">path</span>: path.<span class="title function_">resolve</span>(**dirname, <span class="string">&quot;dist&quot;</span>),</span><br><span class="line">        <span class="attr">filename</span>: <span class="string">&quot;bundle.js&quot;</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">devServer</span>: &#123;</span><br><span class="line">        <span class="attr">contentBase</span>: <span class="string">&quot;./dist&quot;</span>,     <span class="comment">// 加载页面的所在目录</span></span><br><span class="line">        <span class="attr">historyApiFallback</span>: <span class="literal">true</span>,  <span class="comment">// 不跳转</span></span><br><span class="line">        <span class="attr">inline</span>: <span class="literal">true</span>,              <span class="comment">// 实时刷新</span></span><br><span class="line">        <span class="attr">hot</span>: <span class="literal">true</span>,                 <span class="comment">// 热更新，即不刷新浏览器的前提下刷新页面</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 运行</span></span><br><span class="line">npm run server</span><br></pre></td></tr></table></figure>


<h2 id="脚手架工具"><a href="#脚手架工具" class="headerlink" title="脚手架工具"></a>脚手架工具</h2><blockquote>
<p>用来创建项目基础结构、提供项目规范和约定，主要分为通用型和专用型两类。主要工作过程是通过命令行交互询问用户问题，然后根据用户回答的结果生成文件。</p>
</blockquote>
<h3 id="原生创建"><a href="#原生创建" class="headerlink" title="原生创建"></a>原生创建</h3><blockquote>
<p>通过命令行工具启动一个程序，在命令行交互中获取用户输入，然后创建对应的代码文件。下面通过原始方式来创建一个极简的脚手架工具。</p>
</blockquote>
  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1、初始化目录、安装模板语法和命令行交互插件</span></span><br><span class="line">mkdir mycli &amp;&amp; npm init -y</span><br><span class="line">npm install ejs inquirer</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2、代码修改</span></span><br><span class="line"><span class="comment">// mycli/package.json: 新增代码 &quot;bin&quot;: &quot;cli.js&quot; 指定入口文件</span></span><br><span class="line"><span class="comment">// cjs.js: 脚本命令代码添加首行文件头 #!/usr/bin/env node</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 3、创建模板文件：templete/index.html：&lt;title&gt;&lt;%= name %&gt;&lt;/title&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 4、编辑脚手架逻辑文件：cjs.js</span></span><br><span class="line">inquirer.<span class="title function_">prompt</span>([&#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="string">&#x27;input&#x27;</span>,</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&#x27;name&#x27;</span>,</span><br><span class="line">    <span class="attr">message</span>: <span class="string">&#x27;Project Name:&#x27;</span></span><br><span class="line">&#125;]).<span class="title function_">then</span>(<span class="function"><span class="params">answer</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> temp = path.<span class="title function_">join</span>(_darname, <span class="string">&#x27;templetes&#x27;</span>)</span><br><span class="line">    <span class="keyword">const</span> dist = process.<span class="title function_">cwd</span>()</span><br><span class="line">    fs.<span class="title function_">readdir</span>(temp, <span class="function">(<span class="params">err, files</span>)=&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span>(err) <span class="keyword">throw</span> err</span><br><span class="line">        files.<span class="title function_">forEach</span>(<span class="function"><span class="params">file</span> =&gt;</span> &#123;</span><br><span class="line">            ejs.<span class="title function_">renderFile</span>(path.<span class="title function_">join</span>(temp, file), answer, </span><br><span class="line">            <span class="function">(<span class="params">err, result</span>)=&gt;</span>&#123;</span><br><span class="line">                <span class="keyword">if</span>(err) <span class="keyword">throw</span> err</span><br><span class="line">                fs.<span class="title function_">writeFileSync</span>(path.<span class="title function_">join</span>(dist, file), result)</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 5、挂载、卸载</span></span><br><span class="line">npm link         <span class="comment">// 全局挂载后就可以使用 mycli 创建项目文件了</span></span><br><span class="line">npm unlink       <span class="comment">// 卸载命令行</span></span><br></pre></td></tr></table></figure>


<h3 id="Yeoman"><a href="#Yeoman" class="headerlink" title="Yeoman"></a>Yeoman</h3><blockquote>
<p>通用型脚手架工具，主要包括命令行管理工具 yo、生成器 generator。不同的生成器针对 app、小程序等不同项目，使用时安装 generator 并通过 yo 运行生成项目结构。</p>
</blockquote>
  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1、基本使用</span></span><br><span class="line">npm install -g yo generator-webapp generator-node</span><br><span class="line">yo webapp || yo node</span><br><span class="line">npm run start</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 2、自定义定制</span></span><br><span class="line">mkdir generator-sample        <span class="comment">// 新建 generator-[name]</span></span><br><span class="line">npm init -y                   <span class="comment">// -y 略过问答而使用默认值</span></span><br><span class="line">npm install yeoman-generator  <span class="comment">// 安装生成器基类</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// generators/app/index.js：新建入口文件并编辑</span></span><br><span class="line"><span class="keyword">const</span> yeoman = <span class="built_in">require</span>(<span class="string">&#x27;yeoman-generator&#x27;</span>);</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">class</span> <span class="title class_">extends</span> <span class="title class_">Generator</span> &#123;</span><br><span class="line">    prompting () &#123;  <span class="comment">// 命令行交互</span></span><br><span class="line">        <span class="keyword">return</span> <span class="variable language_">this</span>.<span class="title function_">prompt</span>([&#123;</span><br><span class="line">            <span class="attr">type</span>: <span class="string">&#x27;input&#x27;</span>,</span><br><span class="line">            <span class="attr">name</span>: <span class="string">&#x27;name&#x27;</span>,</span><br><span class="line">            <span class="attr">message</span>: <span class="string">&#x27;Your Project Name:&#x27;</span>,</span><br><span class="line">            <span class="attr">default</span>: <span class="variable language_">this</span>.<span class="property">appname</span></span><br><span class="line">        &#125;]).<span class="title function_">then</span>(<span class="function"><span class="params">answer</span> =&gt;</span> &#123;</span><br><span class="line">            <span class="variable language_">this</span>.<span class="property">answer</span> = answer;</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125; </span><br><span class="line">    writing () &#123;   <span class="comment">// 文件写入</span></span><br><span class="line">        <span class="keyword">const</span> temp = <span class="variable language_">this</span>.<span class="title function_">templetePath</span>(<span class="string">&#x27;temp.txt&#x27;</span>)</span><br><span class="line">        <span class="keyword">const</span> output = <span class="variable language_">this</span>.<span class="title function_">destinationPath</span>(<span class="string">&quot;out.txt&quot;</span>)</span><br><span class="line">        <span class="keyword">const</span> context = <span class="variable language_">this</span>.<span class="property">answer</span></span><br><span class="line">        <span class="variable language_">this</span>.<span class="property">fs</span>.<span class="title function_">copyTpl</span>(temp, output, context)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 挂载命令</span></span><br><span class="line">npm link   <span class="comment">// 将 generator-sample 挂载为全局命令</span></span><br><span class="line">npm config get prefix   <span class="comment">// 查找 npm 全局目录命令</span></span><br><span class="line">yo sample     <span class="comment">// 挂载成功后用来在新目录生成文件内容</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 3、创建 Vue 脚手架</span></span><br><span class="line">mkdir generator-vue</span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用模版：为了方便可以将 Vue 空项目代码复制到 generators/app/templates</span></span><br><span class="line"><span class="comment">// templates\public\index.html：不需要替换转义时可用两个 %% 屏蔽，重写时会跳过</span></span><br><span class="line"><span class="comment">// &lt;title&gt;&lt;%= name %&gt;&lt;/title&gt;  --&gt; &lt;title&gt;&lt;%%= name %%&gt;&lt;/title&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// generators/app/index.js</span></span><br><span class="line"><span class="keyword">const</span> yeoman = <span class="built_in">require</span>(<span class="string">&#x27;yeoman-generator&#x27;</span>);</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = <span class="keyword">class</span> <span class="title class_">vueCli</span> <span class="keyword">extends</span> <span class="title class_ inherited__">Generator</span> &#123;</span><br><span class="line">    prompting () &#123; &#125;</span><br><span class="line">    writing () &#123; </span><br><span class="line">        <span class="keyword">const</span> templetes = [</span><br><span class="line">            <span class="string">&#x27;public/index.html&#x27;</span>,</span><br><span class="line">            <span class="string">&#x27;src/assets/logo.png&#x27;</span>,</span><br><span class="line">            <span class="string">&#x27;src/compontents/Home.vue&#x27;</span>,</span><br><span class="line">            <span class="string">&#x27;src/router/index.js&#x27;</span>,</span><br><span class="line">            ...</span><br><span class="line">        ]</span><br><span class="line">        templetes.<span class="title function_">forEach</span>(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">            <span class="variable language_">this</span>.<span class="property">fs</span>.<span class="title function_">copyTpl</span>(</span><br><span class="line">                <span class="variable language_">this</span>.<span class="title function_">templetePath</span>(item), </span><br><span class="line">                <span class="variable language_">this</span>.<span class="title function_">destinationPath</span>(item)</span><br><span class="line">                <span class="variable language_">this</span>.<span class="property">answer</span></span><br><span class="line">            )</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">...</span><br></pre></td></tr></table></figure>


<h1 id="四、版本管理"><a href="#四、版本管理" class="headerlink" title="四、版本管理"></a>四、版本管理</h1><h2 id="Git-Github"><a href="#Git-Github" class="headerlink" title="Git Github"></a>Git Github</h2><ol>
<li>Git：指定了 remote 链接和用户信息（用户名+邮箱）之后，git 可以帮你将提交过到你本地分支的代码 push 到远程的 git 仓库（任意提供了 git 托管服务的服务器上都可以，包括你自己建的服务器或者 GitHub 等网站提供的服务器）或者将远程仓库的代码 fetch 到本地。</li>
<li>Github：只是一个提供存储空间的服务器，用来存储 git 仓库。当然现在 Github 已经由一个存放 git 仓库的网站空间发展为了一个开源社区（不只具有存储 git 仓库的功能了），你可以参与别人的开源项目，也可以让别人参与你的开源项目。</li>
</ol>
<h2 id="工作流程"><a href="#工作流程" class="headerlink" title="工作流程"></a>工作流程</h2>  <div style="text-indent: 2em">开发者在自己的机器上更新服务器上的最新代码，然后根据需要创建分支，在该分支上提交本地修改的代码到远程仓库并通知主开发者合并代码。如果主开发者发现代码有冲突则让开发者修改后重新提交，没有冲突则合并代码。注意本地的 .git文件是指本地仓库，.git目录下存放着所有文件的版本和关联信息但默认隐藏。开发流程图如下</div>

  <div align="center">
    <img src="" data-original="/images/web/git_work.png" alt="工作流程图" width="100%">
  </div>

<h2 id="常用命令"><a href="#常用命令" class="headerlink" title="常用命令"></a>常用命令</h2>  <div align="center">
    <img src="" data-original="/images/web/git_order.png" alt="常用命令图" width="100%">
  </div>


<h2 id="基础配置-1"><a href="#基础配置-1" class="headerlink" title="基础配置"></a>基础配置</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">git config --<span class="variable language_">global</span> --list         <span class="comment">//查看全局配置</span></span><br><span class="line">git config --<span class="variable language_">global</span> user.<span class="property">name</span> <span class="string">&quot;chuanggefighting&quot;</span>    <span class="comment">//设置用户名</span></span><br><span class="line">git config --<span class="variable language_">global</span> user.<span class="property">email</span> <span class="string">&quot;17621538916@163.com&quot;</span>    <span class="comment">//设置邮箱</span></span><br></pre></td></tr></table></figure>


<h2 id="ssh-密钥配置"><a href="#ssh-密钥配置" class="headerlink" title="ssh 密钥配置"></a>ssh 密钥配置</h2><div style="text-indent: 2em">Git使用https协议，每次pull/push都要输入密码比较麻烦，而使用git协议后使用ssh密钥，这样可以省去每次都输密码。配置步骤如下：</div>

<ol>
<li>检测 SSH keys 是否存在：<code>cd ~/.ssh</code>。</li>
<li>创建 ssh key(生成密钥对)：<code>ssh-keygen -t rsa -C &quot;17621538916@163.com&quot;</code>：此时会提示自定义名称和 push 时的密码 (不是 git 登录密码), 一般推荐略过(直接三个回车), 如果看到成功保存信息则说明如果创建成功。</li>
<li>添加公钥到 github 等个人的远程仓库。</li>
<li>查看生成的公钥：<code>cat ~/.ssh/id_rsa.pub</code>。</li>
<li>登陆 github：点击头像、Settings、左栏点击 SSH and GPG keys、点击 New SSH key、复制上面的公钥内容并粘贴入”Key”，自定义 title、点击 Add key。</li>
<li>测试 SSH 的连接：<code>ssh -T git@github.com</code>。</li>
<li>输入 yes 后可看到信息。</li>
</ol>
<h2 id="代码提交命令"><a href="#代码提交命令" class="headerlink" title="代码提交命令"></a>代码提交命令</h2>  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 下载远程代码</span></span><br><span class="line">git clone url              <span class="comment">// 拉取远程主分支代码到本地</span></span><br><span class="line">git clone -b dev url       <span class="comment">// 拉取指定分支代码到本地</span></span><br><span class="line">git remote -v              <span class="comment">// 查询当前远程的版本</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 拉取远程代码并合并到本地</span></span><br><span class="line">git stash                  <span class="comment">// 保存本地修改 stash@&#123;0&#125;</span></span><br><span class="line">git stash save <span class="string">&quot;更新&quot;</span>       <span class="comment">// 存储时添加备注，方便查找</span></span><br><span class="line">git pull                   <span class="comment">// 拉取远程代码</span></span><br><span class="line">git checkout dev           <span class="comment">// 切换到本地其它分支</span></span><br><span class="line">git stash list             <span class="comment">// 查看所有的本地修改记录</span></span><br><span class="line">git stash pop              <span class="comment">// 合并最新修改到本地并删除</span></span><br><span class="line">git stash apply            <span class="comment">// 合并最新修改到本地但不删除</span></span><br><span class="line">git stash clear            <span class="comment">// 清空 stash</span></span><br><span class="line">git stash drop stash@&#123;$n&#125;  <span class="comment">// 删除某个 stash</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 推送本地修改</span></span><br><span class="line">git status</span><br><span class="line">git add .       <span class="comment">// 指定需要提交到本地仓库的文件</span></span><br><span class="line">git status</span><br><span class="line">git commit -m <span class="string">&quot;create dev&quot;</span>  <span class="comment">// 提交代码到本地</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 新建分支</span></span><br><span class="line">git branch                 <span class="comment">// 查看本地分支</span></span><br><span class="line">git checkout -b dev        <span class="comment">// 新建并切换到该分支</span></span><br><span class="line">git push origin dev        <span class="comment">// 推送到远程仓库</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 切换到本地不存在的远程分支</span></span><br><span class="line">git branch -a</span><br><span class="line">git checkout -b dev remotes/origin/dev</span><br><span class="line"></span><br><span class="line"><span class="comment">// 删除分支：强制删除 -D</span></span><br><span class="line">git branch -d dev</span><br><span class="line">git branch -r -d origin/dev</span><br><span class="line">git push origin :dev           <span class="comment">// 远程分支删除的简单方法</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 合并分支到当前分支</span></span><br><span class="line">git checkout master</span><br><span class="line">git merge dev         <span class="comment">// 每次都产生一个新节点，提交记录会分开显示</span></span><br><span class="line">git rebase dev   <span class="comment">// 不产生新节点，提交记录融合为一个清晰的线性提交</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// master 分支代码合并到某分支</span></span><br><span class="line">git checkout master</span><br><span class="line">git pull</span><br><span class="line">git checkout dev</span><br><span class="line">git merge master</span><br><span class="line">git push</span><br><span class="line"></span><br><span class="line"><span class="comment">// git pull --rebase 代码更整洁，推荐使用</span></span><br><span class="line">git pull = git fetch + git merge</span><br><span class="line">git pull --rebase = git fetch + git rebase</span><br><span class="line"><span class="comment">// 指定某个新分支在执行 git pull 时默认使用 rebase 方式</span></span><br><span class="line">git config branch.<span class="property">dev</span>.<span class="property">rebase</span> <span class="literal">true</span></span><br><span class="line">git config --<span class="variable language_">global</span> branch.<span class="property">autosetuprebase</span> always</span><br><span class="line"></span><br><span class="line"><span class="comment">// 其它</span></span><br><span class="line">git fetch --all       <span class="comment">// 更新远程修改但不会 merge</span></span><br><span class="line">git reset --hard orgin/master  <span class="comment">// 强制更新(慎用)</span></span><br><span class="line">git remote set-url origin url  <span class="comment">// 修改远程仓库地址</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// gitignore 不生效的解决方案</span></span><br><span class="line">git rm -r --cached .</span><br><span class="line">git add .</span><br><span class="line">git commit -m <span class="string">&#x27;update .gitignore&#x27;</span>  <span class="comment">// windows 命令</span></span><br><span class="line">git commit -m <span class="string">&quot;update .gitignore&quot;</span>  <span class="comment">// mac：需要双引号</span></span><br></pre></td></tr></table></figure>


<h2 id="Github-挂个人网页"><a href="#Github-挂个人网页" class="headerlink" title="Github 挂个人网页"></a>Github 挂个人网页</h2><ol>
<li><strong>Github 上建立仓库，比如 resume</strong>。</li>
<li><strong>进入新建仓库并选择 settings 进行仓库设置，滚动到页面底部 “Github Pages” 部分</strong>。<br>* Source -* master branch，保存后就会自动生成网址。<br>* 生成网址拼接文件路径后访问：chuanggefighting.github.io&#x2F;resume&#x2F;dist&#x2F;index.html。</li>
<li><strong>将仓库代码克隆到本地</strong>：删除除了 .git 以外的其他文件，然后通过以下命令测试。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">git add *               <span class="comment">// 添加到暂存区</span></span><br><span class="line">git commit -m <span class="string">&#x27;del&#x27;</span>     <span class="comment">// 上传到本地仓库</span></span><br><span class="line">git push origin master  <span class="comment">// 上传到远程仓库</span></span><br></pre></td></tr></table></figure></li>
<li><strong>更新个人代码到远程仓库</strong></li>
</ol>

    </div>

    
    
    <div>
      
        <div>
    
        <div style="text-align:center;color: #ccc;font-size:14px;margin-top:20px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    
</div>

      
    </div>
    
        

<div>
<ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>本文作者： </strong>chuangges
  </li>
  <li class="post-copyright-link">
    <strong>本文链接：</strong>
    <a href="https://chuangges.gitee.io/2019/02/23/2-3-web%E5%B7%A5%E5%85%B7/" title="web 开发工具">https://chuangges.gitee.io/2019/02/23/2-3-web工具/</a>
  </li>
  <li class="post-copyright-license">
    <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/zh_CN" rel="external nofollow noopener noreferrer" target="_blank"><i class="fab fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处！
  </li>
</ul>
</div>


      <footer class="post-footer">

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2019/02/17/2-1-web%E5%BC%80%E5%8F%91%E9%A1%BB%E7%9F%A5/" rel="prev" title="web 开发须知">
      <i class="fa fa-chevron-left"></i> web 开发须知
    </a></div>
      <div class="post-nav-item">
    <a href="/2019/03/02/2-4-web%E5%9B%BE%E5%83%8F/" rel="next" title="Web 图片、二维码、视频">
      Web 图片、二维码、视频 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%80%E3%80%81%E6%93%8D%E4%BD%9C%E7%94%B5%E8%84%91"><span class="nav-number">1.</span> <span class="nav-text">一、操作电脑</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F"><span class="nav-number">1.1.</span> <span class="nav-text">操作系统</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%93%8D%E4%BD%9C%E6%8E%A5%E5%8F%A3"><span class="nav-number">1.2.</span> <span class="nav-text">操作接口</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9C%8D%E5%8A%A1%E5%99%A8"><span class="nav-number">1.3.</span> <span class="nav-text">服务器</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BA%8C%E3%80%81%E5%BC%80%E5%8F%91%E8%B0%83%E8%AF%95"><span class="nav-number">2.</span> <span class="nav-text">二、开发调试</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8-chrome"><span class="nav-number">2.1.</span> <span class="nav-text">浏览器 chrome</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81%E7%BC%96%E8%BE%91-vscode"><span class="nav-number">2.2.</span> <span class="nav-text">代码编辑 vscode</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%8E%A5%E5%8F%A3%E8%B0%83%E8%AF%95-Postman"><span class="nav-number">2.3.</span> <span class="nav-text">接口调试 Postman</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%B0%83%E8%AF%95-vConsole"><span class="nav-number">2.4.</span> <span class="nav-text">移动端调试 vConsole</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%BD%91%E7%AB%99%E5%8A%A0%E9%80%9F"><span class="nav-number">2.5.</span> <span class="nav-text">网站加速</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%B8%89%E3%80%81%E9%A1%B9%E7%9B%AE%E6%9E%84%E5%BB%BA"><span class="nav-number">3.</span> <span class="nav-text">三、项目构建</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7%E6%8C%87%E6%A0%87"><span class="nav-number">3.1.</span> <span class="nav-text">构建工具指标</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%8C%85%E7%AE%A1%E7%90%86%E5%B7%A5%E5%85%B7"><span class="nav-number">3.2.</span> <span class="nav-text">包管理工具</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Npm"><span class="nav-number">3.2.1.</span> <span class="nav-text">Npm</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Npx"><span class="nav-number">3.2.2.</span> <span class="nav-text">Npx</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Yarn"><span class="nav-number">3.2.3.</span> <span class="nav-text">Yarn</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7-Gulp"><span class="nav-number">3.3.</span> <span class="nav-text">构建工具 Gulp</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%89%93%E5%8C%85%E5%B7%A5%E5%85%B7-Webpack"><span class="nav-number">3.4.</span> <span class="nav-text">打包工具 Webpack</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8"><span class="nav-number">3.4.1.</span> <span class="nav-text">基础使用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE"><span class="nav-number">3.4.2.</span> <span class="nav-text">基础配置</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE"><span class="nav-number">3.4.3.</span> <span class="nav-text">高级配置</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%84%9A%E6%89%8B%E6%9E%B6%E5%B7%A5%E5%85%B7"><span class="nav-number">3.5.</span> <span class="nav-text">脚手架工具</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8E%9F%E7%94%9F%E5%88%9B%E5%BB%BA"><span class="nav-number">3.5.1.</span> <span class="nav-text">原生创建</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Yeoman"><span class="nav-number">3.5.2.</span> <span class="nav-text">Yeoman</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%9B%9B%E3%80%81%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86"><span class="nav-number">4.</span> <span class="nav-text">四、版本管理</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#Git-Github"><span class="nav-number">4.1.</span> <span class="nav-text">Git Github</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B7%A5%E4%BD%9C%E6%B5%81%E7%A8%8B"><span class="nav-number">4.2.</span> <span class="nav-text">工作流程</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4"><span class="nav-number">4.3.</span> <span class="nav-text">常用命令</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE-1"><span class="nav-number">4.4.</span> <span class="nav-text">基础配置</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ssh-%E5%AF%86%E9%92%A5%E9%85%8D%E7%BD%AE"><span class="nav-number">4.5.</span> <span class="nav-text">ssh 密钥配置</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%A3%E7%A0%81%E6%8F%90%E4%BA%A4%E5%91%BD%E4%BB%A4"><span class="nav-number">4.6.</span> <span class="nav-text">代码提交命令</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Github-%E6%8C%82%E4%B8%AA%E4%BA%BA%E7%BD%91%E9%A1%B5"><span class="nav-number">4.7.</span> <span class="nav-text">Github 挂个人网页</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="chuangges" src="" data-original="/images/chuang.png">
  <p class="site-author-name" itemprop="name">chuangges</p>
  <div class="site-description" itemprop="description">chuangge's blog.</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">39</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">7</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">7</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/chuangges" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;chuangges" rel="external nofollow noopener noreferrer" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://stackoverflow.com/yourname" title="StackOverflow → https:&#x2F;&#x2F;stackoverflow.com&#x2F;yourname" rel="external nofollow noopener noreferrer" target="_blank"><i class="fab fa-stack-overflow fa-fw"></i>StackOverflow</a>
      </span>
  </div>


  <div class="links-of-blogroll motion-element">
    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
      友情链接
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="https://juejin.im/" title="https:&#x2F;&#x2F;juejin.im&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">掘金</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://www.nowcoder.com/" title="https:&#x2F;&#x2F;www.nowcoder.com&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">牛客网</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://www.docschina.org/" title="https:&#x2F;&#x2F;www.docschina.org&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">印记中文</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="http://tool.lu/" title="http:&#x2F;&#x2F;tool.lu&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">在线工具</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://tinypng.com/" title="https:&#x2F;&#x2F;tinypng.com&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">图片压缩</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://bigjpg.com/" title="https:&#x2F;&#x2F;bigjpg.com&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">图片放大</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://tool.chinaz.com/" title="https:&#x2F;&#x2F;tool.chinaz.com&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">站长工具</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://learn-anything.xyz/" title="https:&#x2F;&#x2F;learn-anything.xyz&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">Learn-Anything</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://stackoverflow.com/" title="https:&#x2F;&#x2F;stackoverflow.com&#x2F;" rel="external nofollow noopener noreferrer" target="_blank">Stack-Overflow</a>
        </li>
    </ul>
  </div>

      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2024</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">chuangge</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-area"></i>
    </span>
    <span title="站点总字数">1m</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
    <span title="站点阅读时长">15:14</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="external nofollow noopener noreferrer" target="_blank">Hexo</a> & <a href="https://pisces.theme-next.org/" class="theme-link" rel="external nofollow noopener noreferrer" target="_blank">NexT.Pisces</a> 强力驱动
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>




  















  

  

<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","model":{"jsonPath":"/live2dw/assets/tororo.model.json"},"display":{"position":"left","width":180,"height":360},"mobile":{"show":false},"react":{"opacityDefault":1,"opacityOnHover":1},"log":false,"tagMode":false});</script>
        <style>
            [bg-lazy] {
                background-image: none !important;
                background-color: #eee !important;
            }
        </style>
        <script>
            window.imageLazyLoadSetting = {
                isSPA: false,
                preloadRatio: 1,
                processImages: null,
            };
        </script><script>window.addEventListener("load",function(){var t=/\.(gif|jpg|jpeg|tiff|png)$/i,r=/^data:image\/[a-z]+;base64,/;Array.prototype.slice.call(document.querySelectorAll("img[data-original]")).forEach(function(a){var e=a.parentNode;"A"===e.tagName&&(e.href.match(t)||e.href.match(r))&&(e.href=a.dataset.original)})});</script><script>!function(e){e.imageLazyLoadSetting.processImages=t;var n=e.imageLazyLoadSetting.isSPA,i=e.imageLazyLoadSetting.preloadRatio||1,r=o();function o(){var t=Array.prototype.slice.call(document.querySelectorAll("img[data-original]")),e=Array.prototype.slice.call(document.querySelectorAll("[bg-lazy]"));return t.concat(e)}function t(){n&&(r=o());for(var t,a=0;a<r.length;a++)0<=(t=(t=r[a]).getBoundingClientRect()).bottom&&0<=t.left&&t.top<=(e.innerHeight*i||document.documentElement.clientHeight*i)&&function(){var t,e,n,i,o=r[a];e=function(){r=r.filter(function(t){return o!==t})},(t=o).hasAttribute("bg-lazy")?(t.removeAttribute("bg-lazy"),e&&e()):(n=new Image,i=t.getAttribute("data-original"),n.onload=function(){t.src=i,t.removeAttribute("data-original"),e&&e()},t.src!==i&&(n.src=i))}()}function a(){clearTimeout(t.tId),t.tId=setTimeout(t,500)}t(),document.addEventListener("scroll",a),e.addEventListener("resize",a),e.addEventListener("orientationchange",a)}(this);</script></body>
</html>
